<template>
  <div class="safety-layout">
    <h2>安全巡查</h2>
    <!-- 顶部导航栏 -->
    <el-tabs v-model="activeTab" class="nav-tabs" @tab-click="handleTabClick">
      <el-tab-pane label="巡查一级分类" name="level1"></el-tab-pane>
      <el-tab-pane label="巡查二级分类" name="level2"></el-tab-pane>
      <el-tab-pane label="巡查签到点管理" name="sign"></el-tab-pane>
      <el-tab-pane label="安全巡查记录" name="record"></el-tab-pane>
    </el-tabs>
    <router-view />
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()
const activeTab = ref('level1')

function handleTabClick(tab) {
  const name = tab.name || tab.paneName || tab;
  if (name === 'level1') router.replace('/main/patrol/category-level1')
  if (name === 'level2') router.replace('/main/patrol/category-level2')
  if (name === 'sign') router.replace('/main/patrol/sign')
  if (name === 'record') router.replace('/main/patrol/patrol-record-stats')
}

// 路由变化时自动同步tab高亮
watch(
  () => route.path,
  (newPath) => {
    if (newPath.includes('category-level1')) activeTab.value = 'level1'
    else if (newPath.includes('category-level2')) activeTab.value = 'level2'
    else if (newPath.includes('sign')) activeTab.value = 'sign'
    else if (newPath.includes('patrol-record-stats') || newPath.includes('patrol-record-detail')) activeTab.value = 'record'
  },
  { immediate: true }
)
</script>

<style scoped>
.safety-layout {
  padding: 20px;
}
.nav-tabs {
  margin-bottom: 20px;
}
</style> 